<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花坊OA系统</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-top: 16px;
        }
    </style>
</head>

<body>

    <div class="container">

        <!-- bs3-panel-primary  是带标题的 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">用户编辑</h3>
            </div>

            <div class="panel-body">

                <div role="form">

                    <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <div class="form-group">
                                <label for="">用户编辑</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">用户密码</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">用户姓名</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">性别</label>
                                
                                <select  id="input" class="form-control">
                                    <option value="未知">未知</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                
                                <!-- <input type="text" class="form-control" id="" placeholder="Input field"> -->
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">生日</label>
                                <input type="date" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">地址</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">身份证</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">电话</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">邮箱</label>
                                <input type="text" class="form-control" id="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">



                            <div class="form-group">
                                <label for="">级别</label>
                                <select  id="level" class="form-control">
                                    
                                </select>
                                <!-- <input type="text" class="form-control" id="" placeholder="Input field"> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <button onclick="onback()" class="btn btn-primary">返回</button>
                        <button class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
<!-- 动态生成级别   重点理解下 str 方法的使用 -->  
<script>
    function getLevel(){
        let arr=
        [
       { id:'AAA',name:'AAA'},
       { id:'AA',name:'AA'},
       { id:'A',name:'A'}
        ]
       let  str=''
        arr.forEach(function(item){
         
         str =str+ `<option value="${item.name}">${item.name}</option>
        
         `
        })
//id 定义的可以直接 用名字 作业元素
level.innerHTML=str
    }
    getLevel()
</script>


<!-- 返回到列表 -->
    <script>
function onback(){
    let confirmEle=confirm('确定要返回吗?')
    if(confirmEle){
        location.href='./list.html'
    }
}

    </script>




</body>

</html>